<div [@routerTransition]>
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>工时库</span>
                </h3>
                <span class="m-section__sub">
                    产品工时信息维护
                </span>
            </div>
        </div>
    </div>

    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="m-form m-form--label-align-right">
                    <form
                        class="horizontal-form"
                        (ngSubmit)="getNormalProduction()"
                    >
                        <div class="row align-items-center m--margin-bottom-10">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label
                                        for="FilterPicNo"
                                        class="control-label"
                                        >图号</label
                                    >
                                    <input
                                        id="FilterPicNo"
                                        type="text"
                                        name="FilterPicNo"
                                        class="form-control"
                                        (keyup)="
                                            $event.which === 13
                                                ? reloadPage()
                                                : 0
                                        "
                                        [(ngModel)]="filterPicNo"
                                    />
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label
                                        for="FilterTaskNo"
                                        class="control-label"
                                        >任务号</label
                                    >
                                    <input
                                        id="FilterTaskNo"
                                        type="text"
                                        name="FilterTaskNo"
                                        class="form-control"
                                        (keyup)="
                                            $event.which === 13
                                                ? reloadPage()
                                                : 0
                                        "
                                        [(ngModel)]="filterTaskNo"
                                    />
                                </div>
                            </div>
                            <div class="col-md-1 m--margin-top-19">
                                <div class="m-checkbox-list">
                                    <label class="m-checkbox">
                                        <input
                                            id="IsOnlyHaveNotRoutes"
                                            type="checkbox"
                                            name="IsOnlyHaveNotRoutes"
                                            [(ngModel)]="onlyHaveNotRoutes"
                                        />
                                        无工时
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-1 m--margin-top-19">
                                <label class="m-checkbox">
                                    <input
                                        id="IsIsTemporaryLaborHour"
                                        type="checkbox"
                                        name="IsIsTemporaryLaborHour"
                                        [(ngModel)]="isTemporaryLaborHour"
                                    />
                                    临时
                                    <span></span>
                                </label>
                            </div>
                            <div class="col-md-2 m--margin-top-19 text-right">
                                <button
                                    type="button"
                                    class="btn btn-primary blue"
                                    (click)="reloadPage()"
                                >
                                    <i class="fa fa-sync"></i> 搜索
                                </button>
                            </div>
                        </div>

                        <div *ngIf="advancedFiltersAreShown" class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label
                                        for="FilterName"
                                        class="control-label"
                                        >名称</label
                                    >
                                    <input
                                        id="FilterName"
                                        name="FilterName"
                                        type="text"
                                        class="form-control"
                                        (keyup)="
                                            $event.which === 13
                                                ? reloadPage()
                                                : 0
                                        "
                                        [(ngModel)]="filterName"
                                    />
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label
                                        for="FilterModel"
                                        class="control-label"
                                        >型号</label
                                    >
                                    <input
                                        id="FilterModel"
                                        name="FilterModel"
                                        type="text"
                                        class="form-control"
                                        (keyup)="
                                            $event.which === 13
                                                ? reloadPage()
                                                : 0
                                        "
                                        [(ngModel)]="filterModel"
                                    />
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label
                                        for="FilterPart"
                                        class="control-label"
                                        >部段</label
                                    >
                                    <input
                                        id="FilterPart"
                                        type="text"
                                        name="FilterPart"
                                        class="form-control"
                                        (keyup)="
                                            $event.which === 13
                                                ? reloadPage()
                                                : 0
                                        "
                                        [(ngModel)]="filterPart"
                                    />
                                </div>
                            </div>
                        </div>
                        <div class="row m--margin-bottom-10">
                            <div class="col-sm-6">
                                <span
                                    class="clickable-item text-muted"
                                    *ngIf="!advancedFiltersAreShown"
                                    (click)="
                                        advancedFiltersAreShown = !advancedFiltersAreShown
                                    "
                                    ><i class="fa fa-angle-down"></i>
                                    显示更多</span
                                >
                                <span
                                    class="clickable-item text-muted"
                                    *ngIf="advancedFiltersAreShown"
                                    (click)="
                                        advancedFiltersAreShown = !advancedFiltersAreShown
                                    "
                                    ><i class="fa fa-angle-up"></i> 收起</span
                                >
                            </div>
                        </div>
                    </form>
                </div>
                <tabset class="tab-container tabbable-line">
                    <tab customClass="m-tabs__item">
                        <span *tabHeading>
                            通用 &nbsp;<span class="m-badge m-badge--success">
                                {{
                                    primengTableHelperNormalProductions.totalRecordsCount
                                }}
                            </span>
                        </span>
                        <div class="row margin-bottom-10">
                            <div class="col mt-6 mt-md-6">
                                <div class="btn-group dropdown mr-2" dropdown>
                                    <button
                                        dropdownToggle
                                        class="dropdown-toggle btn btn-outline-success"
                                    >
                                        <i class="far fa-file-excel"></i
                                        ><span class="caret"></span> 导入Excel
                                    </button>
                                    <ul
                                        class="dropdown-menu dropdown-menu-right dropdown-excel-operations"
                                        *dropdownMenu
                                    >
                                        <li>
                                            <a
                                                href="javascript:;"
                                                class="no-padding"
                                            >
                                                <span>
                                                    <p-fileUpload
                                                        customUpload="true"
                                                        name="ExcelFileUpload"
                                                        #ExcelFileUpload
                                                        maxFileSize="10000000"
                                                        auto="auto"
                                                        accept=".csv,.xls,.xlsx"
                                                        (uploadHandler)="
                                                            uploadExcel($event)
                                                        "
                                                        (onError)="
                                                            onUploadExcelError()
                                                        "
                                                        chooseLabel="选择文件"
                                                    >
                                                    </p-fileUpload>
                                                </span>
                                            </a>
                                        </li>
                                        <li class="dropdown-divider"></li>
                                        <li>
                                            <span
                                                class="dropdown-item-text text-muted"
                                                href="#"
                                            >
                                                <small
                                                    [innerHTML]="
                                                        l(
                                                            'ImportToExcelSampleFileDownloadInfo',
                                                            '<a href=/assets/sampleFiles/工资表.xlsx>' +
                                                                l('ClickHere') +
                                                                '</a>'
                                                        )
                                                    "
                                                ></small>
                                            </span>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="col-sm-6 text-right">
                                <button
                                    type="button"
                                    class="btn btn-success"
                                    (click)="
                                        createOrEditLibraryModal.showAddNormal()
                                    "
                                >
                                    <i class="fa fa-plus"></i> 新增
                                </button>
                            </div>
                        </div>
                        <div class="row align-items-center">
                            <!--<Primeng-TurboTable-Start>-->
                            <div
                                class="primeng-datatable-container"
                                [busyIf]="
                                    primengTableHelperNormalProductions.isLoading
                                "
                            >
                                <p-table
                                    #dataTableNormalProductions
                                    (onLazyLoad)="getNormalProduction($event)"
                                    [value]="
                                        primengTableHelperNormalProductions.records
                                    "
                                    rows="{{
                                        primengTableHelperNormalProductions.defaultRecordsCountPerPage
                                    }}"
                                    [paginator]="false"
                                    [lazy]="true"
                                    scrollable="true"
                                    ScrollWidth="100%"
                                    responsive="primengTableHelperNormalProductions.isResponsive"
                                    resizableColumns="primengTableHelperNormalProductions.resizableColumns"
                                >
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="width: 140px;">操作</th>
                                            <th pSortableColumn="picNo">
                                                图号
                                                <p-sortIcon
                                                    field="picNo"
                                                ></p-sortIcon>
                                            </th>
                                            <th pSortableColumn="name">
                                                名称
                                                <p-sortIcon
                                                    field="name"
                                                ></p-sortIcon>
                                            </th>
                                            <th pSortableColumn="model">
                                                型号
                                                <p-sortIcon
                                                    field="name"
                                                ></p-sortIcon>
                                            </th>
                                            <th pSortableColumn="part">
                                                部段
                                                <p-sortIcon
                                                    field="part"
                                                ></p-sortIcon>
                                            </th>
                                            <th style="width: 200px;">
                                                工时
                                            </th>
                                            <th
                                                style="width: 150px;"
                                                pSortableColumn="creationTime"
                                            >
                                                创建时间
                                                <p-sortIcon
                                                    field="creationTime"
                                                ></p-sortIcon>
                                            </th>
                                        </tr>
                                    </ng-template>
                                    <ng-template
                                        pTemplate="body"
                                        let-record="$implicit"
                                    >
                                        <tr>
                                            <td style="width: 140px;">
                                                <div class="text-left">
                                                    <div
                                                        class="btn-group dropdown"
                                                        dropdown
                                                        container="body"
                                                    >
                                                        <button
                                                            dropdownToggle
                                                            class="dropdown-toggle btn btn-sm btn-primary"
                                                        >
                                                            <i
                                                                class="fa fa-cog"
                                                            ></i
                                                            ><span
                                                                class="caret"
                                                            ></span>
                                                            {{
                                                                "Actions"
                                                                    | localize
                                                            }}
                                                        </button>
                                                        <ul
                                                            class="dropdown-menu"
                                                            *dropdownMenu
                                                        >
                                                            <li>
                                                                <a
                                                                    href="javascript:;"
                                                                    (click)="
                                                                        createOrEditLibraryModal.showAddNormal(
                                                                            record.id
                                                                        )
                                                                    "
                                                                    >{{
                                                                        "Edit"
                                                                            | localize
                                                                    }}</a
                                                                >
                                                            </li>
                                                            <li>
                                                                <a
                                                                    href="javascript:;"
                                                                    (click)="
                                                                        deleteProduction(
                                                                            record
                                                                        )
                                                                    "
                                                                    >删除</a
                                                                >
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </td>

                                            <td>
                                                <span class="ui-column-title"
                                                    >图号</span
                                                >
                                                {{ record.picNo }}
                                            </td>
                                            <td>
                                                <span class="ui-column-title"
                                                    >名称</span
                                                >
                                                {{ record.name }}
                                            </td>
                                            <td>
                                                <span class="ui-column-title"
                                                    >型号</span
                                                >
                                                {{ record.model }}
                                            </td>
                                            <td>
                                                <span class="ui-column-title"
                                                    >型号</span
                                                >
                                                {{ record.part }}
                                            </td>
                                            <td style="width: 200px;">
                                                <span class="ui-column-title"
                                                    >工时</span
                                                >
                                                <a
                                                    *ngIf="
                                                        !record.routeLaborHourString ||
                                                        record.routeLaborHourString ==
                                                            ''
                                                    "
                                                    href="javascript:;"
                                                    (click)="
                                                        editRouteModal.showEditRoute(
                                                            record.id,
                                                            record.routeString,
                                                            record.isTemporaryLaborHour
                                                        )
                                                    "
                                                    class="m-link m-link--state m-link--danger"
                                                    >空</a
                                                >
                                                <a
                                                    *ngIf="
                                                        record.routeLaborHourString &&
                                                        record.isTemporaryLaborHour
                                                    "
                                                    href="javascript:;"
                                                    (click)="
                                                        editRouteModal.showEditRoute(
                                                            record.id,
                                                            record.routeString,
                                                            record.isTemporaryLaborHour
                                                        )
                                                    "
                                                    class="m-link m-link--warning"
                                                    >{{
                                                        record.routeLaborHourString
                                                    }}</a
                                                >
                                                <a
                                                    *ngIf="
                                                        record.routeLaborHourString &&
                                                        !record.isTemporaryLaborHour
                                                    "
                                                    href="javascript:;"
                                                    (click)="
                                                        editRouteModal.showEditRoute(
                                                            record.id,
                                                            record.routeString,
                                                            record.isTemporaryLaborHour
                                                        )
                                                    "
                                                    class="m-link"
                                                    >{{
                                                        record.routeLaborHourString
                                                    }}</a
                                                >
                                            </td>
                                            <td style="width: 150px;">
                                                <span class="ui-column-title"
                                                    >创建时间</span
                                                >
                                                {{
                                                    record.creationTime
                                                        | momentFormat
                                                            : "YYYY-MM-DD HH:mm"
                                                }}
                                            </td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                                <div
                                    class="primeng-no-data"
                                    *ngIf="
                                        primengTableHelperNormalProductions.totalRecordsCount ==
                                        0
                                    "
                                >
                                    没有数据
                                </div>
                                <div class="primeng-paging-container">
                                    <p-paginator
                                        [rows]="
                                            primengTableHelperNormalProductions.defaultRecordsCountPerPage
                                        "
                                        #paginatorNormal
                                        (onPageChange)="
                                            getNormalProduction($event)
                                        "
                                        [totalRecords]="
                                            primengTableHelperNormalProductions.totalRecordsCount
                                        "
                                        [rowsPerPageOptions]="
                                            primengTableHelperNormalProductions.predefinedRecordsCountPerPage
                                        "
                                    >
                                    </p-paginator>
                                    <span class="total-records-count">
                                        共
                                        {{
                                            primengTableHelperNormalProductions.totalRecordsCount
                                        }}
                                        条
                                    </span>
                                </div>
                            </div>
                            <!--<Primeng-TurboTable-End>-->
                        </div>
                    </tab>
                    <tab customClass="m-tabs__item">
                        <span *tabHeading>
                            专用 &nbsp;<span class="m-badge m-badge--brand">
                                {{
                                    primengTableHelperSpecialProductions.totalRecordsCount
                                }}
                            </span>
                        </span>
                        <div class="row margin-bottom-10">
                            <div class="col-sm-12 text-right">
                                <button
                                    type="button"
                                    class="btn btn-brand"
                                    (click)="
                                        createOrEditLibraryModal.showAddSpecial()
                                    "
                                >
                                    <i class="fa fa-plus"></i> 新增
                                </button>
                                <button
                                    type="button"
                                    class="btn btn-metal"
                                    (click)="reloadPage()"
                                >
                                    <i class="fa fa-sync"></i> 刷新
                                </button>
                            </div>
                        </div>
                        <div class="row align-items-center">
                            <!--<Primeng-TurboTable-Start>-->
                            <div
                                class="primeng-datatable-container"
                                [busyIf]="
                                    primengTableHelperSpecialProductions.isLoading
                                "
                            >
                                <p-table
                                    #dataTableSpecialProductions
                                    (onLazyLoad)="getSpecialProduction($event)"
                                    [value]="
                                        primengTableHelperSpecialProductions.records
                                    "
                                    rows="{{
                                        primengTableHelperSpecialProductions.defaultRecordsCountPerPage
                                    }}"
                                    [paginator]="false"
                                    [lazy]="true"
                                    scrollable="true"
                                    ScrollWidth="100%"
                                    responsive="primengTableHelperSpecialProductions.isResponsive"
                                    resizableColumns="primengTableHelperSpecialProductions.resizableColumns"
                                >
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="width: 140px;">操作</th>
                                            <th pSortableColumn="picNo">
                                                图号
                                                <p-sortIcon
                                                    field="picNo"
                                                ></p-sortIcon>
                                            </th>
                                            <th pSortableColumn="name">
                                                名称
                                                <p-sortIcon
                                                    field="name"
                                                ></p-sortIcon>
                                            </th>
                                            <th pSortableColumn="taskNo">
                                                任务
                                                <p-sortIcon
                                                    field="taskNo"
                                                ></p-sortIcon>
                                            </th>
                                            <th pSortableColumn="model">
                                                型号
                                                <p-sortIcon
                                                    field="model"
                                                ></p-sortIcon>
                                            </th>
                                            <th pSortableColumn="part">
                                                部段
                                                <p-sortIcon
                                                    field="part"
                                                ></p-sortIcon>
                                            </th>
                                            <th style="width: 200px;">
                                                工时
                                            </th>
                                            <th
                                                style="width: 150px;"
                                                pSortableColumn="creationTime"
                                            >
                                                创建时间
                                                <p-sortIcon
                                                    field="creationTime"
                                                ></p-sortIcon>
                                            </th>
                                        </tr>
                                    </ng-template>
                                    <ng-template
                                        pTemplate="body"
                                        let-record="$implicit"
                                    >
                                        <tr>
                                            <td style="width: 140px;">
                                                <div class="text-left">
                                                    <div
                                                        class="btn-group dropdown"
                                                        dropdown
                                                        container="body"
                                                    >
                                                        <button
                                                            dropdownToggle
                                                            class="dropdown-toggle btn btn-sm btn-primary"
                                                        >
                                                            <i
                                                                class="fa fa-cog"
                                                            ></i
                                                            ><span
                                                                class="caret"
                                                            ></span>
                                                            {{
                                                                "Actions"
                                                                    | localize
                                                            }}
                                                        </button>
                                                        <ul
                                                            class="dropdown-menu"
                                                            *dropdownMenu
                                                        >
                                                            <li>
                                                                <a
                                                                    href="javascript:;"
                                                                    (click)="
                                                                        createOrEditLibraryModal.showAddSpecial(
                                                                            record.id
                                                                        )
                                                                    "
                                                                    >{{
                                                                        "Edit"
                                                                            | localize
                                                                    }}</a
                                                                >
                                                            </li>
                                                            <li>
                                                                <a
                                                                    href="javascript:;"
                                                                    (click)="
                                                                        deleteProduction(
                                                                            record
                                                                        )
                                                                    "
                                                                    >删除</a
                                                                >
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="ui-column-title"
                                                    >图号</span
                                                >
                                                {{ record.picNo }}
                                            </td>
                                            <td>
                                                <span class="ui-column-title"
                                                    >名称</span
                                                >
                                                {{ record.name }}
                                            </td>
                                            <td>
                                                <span class="ui-column-title"
                                                    >任务</span
                                                >
                                                {{ record.taskNo }}
                                            </td>
                                            <td>
                                                <span class="ui-column-title"
                                                    >型号</span
                                                >
                                                {{ record.model }}
                                            </td>
                                            <td>
                                                <span class="ui-column-title"
                                                    >部段</span
                                                >
                                                {{ record.part }}
                                            </td>
                                            <td style="width: 200px;">
                                                <span class="ui-column-title"
                                                    >工时</span
                                                >
                                                <a
                                                    *ngIf="
                                                        !record.routeLaborHourString ||
                                                        record.routeLaborHourString ==
                                                            ''
                                                    "
                                                    href="javascript:;"
                                                    (click)="
                                                        editRouteModal.showEditRoute(
                                                            record.id,
                                                            record.routeString,
                                                            record.isTemporaryLaborHour
                                                        )
                                                    "
                                                    class="m-link m-link--state m-link--danger"
                                                    >空</a
                                                >
                                                <a
                                                    *ngIf="
                                                        record.routeLaborHourString &&
                                                        record.isTemporaryLaborHour
                                                    "
                                                    href="javascript:;"
                                                    (click)="
                                                        editRouteModal.showEditRoute(
                                                            record.id,
                                                            record.routeString,
                                                            record.isTemporaryLaborHour
                                                        )
                                                    "
                                                    class="m-link m-link--warning"
                                                    >{{
                                                        record.routeLaborHourString
                                                    }}</a
                                                >
                                                <a
                                                    *ngIf="
                                                        record.routeLaborHourString &&
                                                        !record.isTemporaryLaborHour
                                                    "
                                                    href="javascript:;"
                                                    (click)="
                                                        editRouteModal.showEditRoute(
                                                            record.id,
                                                            record.routeString,
                                                            record.isTemporaryLaborHour
                                                        )
                                                    "
                                                    class="m-link"
                                                    >{{
                                                        record.routeLaborHourString
                                                    }}</a
                                                >
                                            </td>
                                            <td style="width: 150px;">
                                                <span class="ui-column-title"
                                                    >创建时间</span
                                                >
                                                {{
                                                    record.creationTime
                                                        | momentFormat
                                                            : "YYYY-MM-DD HH:mm"
                                                }}
                                            </td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                                <div
                                    class="primeng-no-data"
                                    *ngIf="
                                        primengTableHelperSpecialProductions.totalRecordsCount ==
                                        0
                                    "
                                >
                                    没有数据
                                </div>
                                <div class="primeng-paging-container">
                                    <p-paginator
                                        [rows]="
                                            primengTableHelperSpecialProductions.defaultRecordsCountPerPage
                                        "
                                        #paginatorSpecial
                                        (onPageChange)="
                                            getSpecialProduction($event)
                                        "
                                        [totalRecords]="
                                            primengTableHelperSpecialProductions.totalRecordsCount
                                        "
                                        [rowsPerPageOptions]="
                                            primengTableHelperSpecialProductions.predefinedRecordsCountPerPage
                                        "
                                    >
                                    </p-paginator>
                                    <span class="total-records-count">
                                        共
                                        {{
                                            primengTableHelperSpecialProductions.totalRecordsCount
                                        }}
                                        条
                                    </span>
                                </div>
                            </div>
                            <!--<Primeng-TurboTable-End>-->
                        </div>
                    </tab>
                </tabset>
            </div>
        </div>
    </div>
    <createOrEditLibraryModal
        #createOrEditLibraryModal
        (modalSave)="reloadPage()"
    ></createOrEditLibraryModal>
    <editRouteModal #editRouteModal (modalSave)="reloadPage()"></editRouteModal>
</div>
